<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-form-item label="模板名称" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item label="模板编码如不填系统自动生成">
            <jb-input v-model:value="form.sn" placeholder="请输入模板编码" />
        </n-form-item>
        <n-form-item label="备注信息（200字内）" path="briefInfo">
            <jb-input
                v-model:value="form.remark"
                type="textarea"
                :maxlength="200"
                placeholder="请输入简介信息"
            />
        </n-form-item>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'

const props = withDefaults(
    defineProps<{
        id?: string
        name?: string
        sn?: string
        remark?: string
    }>(),
    {
        id: '',
        name: '',
        sn: '',
        remark: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()

interface PostType {
    id: string
    name: string
    sn: string
    remark: string
}

const rules: FormRules = {
    name: new Rules().required('请输入模板名称').value
}

const form = useResetableData<PostType>({
    id: '',
    name: '',
    sn: '',
    remark: ''
})

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = '/api/admin/hiprint/tpl/submit'
    await JBoltApi.tryPost(url, form)
    return true
}

onMounted(() => {
    if (props.id) {
        form._reset(props)
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
